<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问答页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }
        .container {
            margin-top:200px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 500px;
            width: 100%;
        }
        .question {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        .input-group input {
            width: calc(100% - 22px);
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .input-group button {
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }
        .input-group button:hover {
            background-color: #0056b3;
        }
        #loading-container {
            display: none; /* Initially hidden */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            flex-direction: column; /* Add this line to align items vertically */
        }

        .loader {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

        .loading-text {
            margin-top: 20px; /* Space between the loader and the text */
            font-size: 24px;
            color: white; /* Text color */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #answerInput {
            box-sizing: border-box;
            width: 100%; /* 设置宽度为父容器的100% */
            height: auto; /* 高度自动调整 */
            padding: 10px; /* 内边距 */
            border: 2px solid #ccc; /* 边框 */
            border-radius: 5px; /* 圆角 */
            font-size: 16px; /* 字体大小 */
            resize: vertical; /* 允许垂直方向上的调整 */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        #answerInput::placeholder {
            color: #999; /* 占位符文本颜色 */
        }
    </style>
    {% load static %}
</head>
<body>
    <div id="loading-container">
        <div class="loader"></div>
        <p class="loading-text">正在加载，请稍等...</p>
    </div>
    <div class="container" id="container">
        <div class="question" id="question"></div>
        <div class="input-group">
            <textarea id="answerInput" rows="4" placeholder="请输入你的答案"></textarea>
            <button id="submitAnswer">提交</button>
            <button id="btn_control">开始录音</button>
        </div>
    </div>

    <script>
        var APPID = "8a808a53";
        var API_SECRET = "YTZlNDRmNzQ5MjA0NmVjYjI2Y2E4ZGJl";
        var API_KEY = "6aef1b8a6eeebb8260789e91a59d961c";
        let questions = {};
        let currentQuestionIndex = 0;
        let time_str = getCurrentFormattedTime();
        function getCurrentFormattedTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}${hours}${minutes}${seconds}`;
        }

        function displayQuestion() {
            document.getElementById('question').innerText = questions[currentQuestionIndex];
        }

        function submitAnswer() {
            const answer = document.getElementById('answerInput').value;
            if (answer.trim() === "") {
                alert("请输入你的答案");
                return;
            }else{
                const wd = `问题：${questions[currentQuestionIndex]} 回答：${answer}`;
                var dataToSend = {
                    wd: wd,
                    time_str: time_str
                };
                $.ajax({
                    url: '/wd/',  // 对应Django中的URL路由
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(dataToSend),
                    success: function(response) {
                        currentQuestion()
                    },
                    error: function(xhr, status, error) {
                        console.log('Error:', error);
                    }
                });
            }

        }
        function reSubmitAnswer(){
            showLoading()
            const gwmc = "{{ gwmc }}";
                var dataToSend = {
                    time_str: time_str,
                    gwmc: gwmc
                };
                $.ajax({
                    url: '/jg/',  // 对应Django中的URL路由
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(dataToSend),
                    success: function(response) {
                        document.getElementById('container').innerHTML = response.message
                        console.log(response.message)
                        if(response.code == '0'){
                            document.getElementById('container').innerHTML+='<button onclick="reSubmitAnswer()" class="reSubmitAnswer">重新提交</button>'
                        }else{
                            document.getElementById('container').style.marginTop = '10px'
                        }
                        hideLoading()
                    },
                    error: function(xhr, status, error) {
                        console.log('Error:', error);
                    }
                });
        }
        function currentQuestion(){
            currentQuestionIndex++;
            if (currentQuestionIndex < questions.length) {
                displayQuestion();
                document.getElementById('answerInput').value = '';
            } else {
                document.getElementById('question').innerText = "所有问题已完成,正在生成报告！";
                document.querySelector('.input-group').style.display = 'none';
                const gwmc = "{{ gwmc }}";
                var dataToSend = {
                    time_str: time_str,
                    gwmc: gwmc
                };
                $.ajax({
                    url: '/jg/',  // 对应Django中的URL路由
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(dataToSend),
                    success: function(response) {
                        document.getElementById('container').innerHTML = response.message
                        console.log(response.message)
                        if(response.code == '0'){
                            document.getElementById('container').innerHTML+='<button onclick="reSubmitAnswer()" class="reSubmitAnswer">重新提交</button>'
                        }else{
                            document.getElementById('container').style.marginTop = '10px'
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('Error:', error);
                    }
                });
            }
        }

function loadData(callback) {
    showLoading()
    const gwmc = "{{ gwmc }}";
    var dataToSend = {
        gwmc: gwmc
    };
    $.ajax({
        url: '/load/',  // 对应Django中的URL路由
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(dataToSend),
        success: function(response) {
            callback(response);
            hideLoading();
        },
        error: function(xhr, status, error) {
            console.log('Error:', error);
        }
    });
}
function showLoading() {
    document.getElementById('loading-container').style.display = 'flex';
}

function hideLoading() {
    document.getElementById('loading-container').style.display = 'none';
}
function handleResponse(data) {
    questions = data.received_data
    console.log(questions);
    displayQuestion()
}
loadData(handleResponse)
    </script>
    <script src="{% static 'example/crypto-js.js' %}"></script>
    <script src="{% static 'dist/index.umd.js' %}"></script>
    <script src="{% static 'example/iat/index.js' %}"></script>
</body>
</html>
